<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪夜背景</title>
</head>
<body style="margin: 0;overflow: hidden;padding: 0;">
    <canvas id="cvs" style="background-color: #000;"></canvas>
</body>
<script>
    const cvs = document.querySelector('#cvs')
    const ctx= cvs.getContext('2d')
    const {clientWidth:width,clientHeight:height } =document.documentElement
    cvs.width=width
    cvs.height=height
    ctx.fillStyle="#fff" // 雪点的颜色
    // 定义雪点的数组
    const bgColors= Array.from(new Array(2000)).map(v=>{
        return {
            x:Math.random()*width,
            y:Math.random()*height,
            step:Math.random()*2.5+0.5
        }
    })
    const render=()=>{
        ctx.clearRect(0,0,width,height)
        ctx.beginPath()
        bgColors.forEach(v=>{
            v.y=v.y>height?0:(v.y+v.step)
            ctx.rect(v.x,v.y,3,3)
        })
        ctx.fill()
        requestAnimationFrame(render) //高并执行
    }
    render()
</script>
</html>